﻿@{
    Layout = null;
}

<!DOCTYPE html>
<script src="@Url.Content("~/Scripts/jquery-1.8.3.min.js")"></script>

<html>
<head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>SetQQKeyPage</title>
    <style type="text/css">
        td, th {
            text-align: center;
            border: 1px solid blue;
            max-width: 200px;
            overflow-x: hidden;
        }
    </style>
</head>
<body>
    <div>
        <table style="width: 100%">
            <tr>
                <th style="background-color: #0094ff">添加</th>
                <td>名称:<input type="text" id="txtName" />
                    <br />
                    Key:<input type="text" id="txtKey" />
                    <br />
                    <input type="button" value="添加" id="btnAdd" />
                </td>

            </tr>

        </table>
        <table style="width: 100%" id="dtTable">
            <tr>
                <th>名称</th>
                <th>key</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>QQ群1</td>
                <td>168d6434e0cb73e765539d09e9b84566326db1e5d6a7bc08eb35a7b566b9258c</td>
                <td>
                    <input type="button" value="启用" class="qiyong" />
                    <input type="button" value="删除" class="shanchu" />
                </td>
            </tr>
        </table>
        <div id="pageDiv" style="text-align: center">

            <input type="button" value="上一页" id="btnPrevPage" />
            <input type="button" value="下一页" id="btnNextPage" />
            <input type="button" value="1/6" id="btnPageShow" />
        </div>


    </div>

    <script type="text/javascript">
        var pageSize = 15;
        var pageIndex = 1;
        var totalPage = 100;

        $(function () {
            bindTalble();
            initEvent();
        });


        function initEvent() {
            $("#btnAdd").click(function () { //添加
                $.ajax({
                    type: "post",
                    url: "@Url.Action("AddQQKey", "JiaQQ")",
                    data: { QQName: $("#txtName").val(), QQkey: $("#txtKey").val() },
                    success: function (data) {
                        alert(data);
                        $("#txtName").val("");
                        $("#txtKey").val("");
                        bindTalble();
                    }
                });
            });

            $(".qiyong").live("click", function () {
                if (confirm("是否启用")) {
                    var $obj = $(this);
                    $.ajax({
                        type: "post",
                        url: "@Url.Action("SetStatusTO1", "JiaQQ")",
                        data: { qqKey: $obj.attr("qqKey") },
                        success: function (dt) {
                            bindTalble();
                        }
                    });
                }
            });

            $(".shanchu").live("click", function () {
                var $obj = $(this);
                $.ajax({
                    type: "post",
                    url: "@Url.Action("Delete", "JiaQQ")",
                    data: { qqKey: $obj.attr("qqKey") },
                    success: function (dt) {
                        alert(dt);
                        bindTalble();
                    }
                });
            });

            $("#btnPrevPage").click(function () {
                if (pageIndex > 1) {
                    pageIndex--;
                    bindTalble();
                }
            });

            $("#btnNextPage").click(function () {
                if (pageIndex < totalPage) {
                    pageIndex++;
                    bindTalble();
                }
            });

        }

        function bindTalble() {
            $.ajax({
                url: "@Url.Action("GetDataByPage", "JiaQQ")",
                type: "post",
                data: { pageIndex: pageIndex },
                dataType: "json",
                success: function (dt) {
                    var totalCount = dt.totalCount;
                    totalPage = Math.floor((totalCount - 1) / pageSize) + 1;
                    $("#btnPageShow").val(pageIndex + "/" + totalPage);

                    $("#dtTable tr:gt(0)").remove();
                    var dtTable = $("#dtTable");
                    var list = dt.list;
                    for (var i = 0; i < list.length; i++) {
                        var newTr;
                        if (list[i].Status == 0) {
                            newTr = $("<tr><td>" + list[i].QQName + "</td><td>" + list[i].QQKey + "</td><td><input value='启用' type='button' class='qiyong' qqKey='" + list[i].QQKey + "'/><input value='删除' type='button' class='shanchu' qqKey='" + list[i].QQKey + "'/></td></tr>")
                        } else {
                            newTr = $("<tr style='background-color:red'><td>" + list[i].QQName + "</td><td>" + list[i].QQKey + "</td><td>启用中 </td></tr>")
                        }
                        dtTable.append(newTr);
                    }
                }
            });
        }
    </script>
</body>
</html>
